<script setup lang="ts">
  import TableLayout from '@/layout/table-layout.vue';
  import { usePageTable } from '@/hooks/arco/usePageTable';
  import { queryElderTakeDrug } from '@/api/data-report/mar';
  import { useSelectOption } from '@/hooks/arco/useSelectOption';
  import { queryList } from '@/api/organization/nursing-home';

  const columns = [
    {
      title: '记录ID',
      dataIndex: 'id',
    },
    {
      title: '所在院区',
      dataIndex: 'branchName',
    },
    {
      title: '长者',
      dataIndex: 'elderInfo',
    },
    {
      title: '性别',
      dataIndex: 'elderGenderLabel',
    },
    {
      title: '用药时间',
      dataIndex: 'takeTime',
    },
    {
      title: '药品名称',
      dataIndex: 'drugName',
    },
    {
      title: '药品规格',
      dataIndex: 'specifications',
    },
    {
      title: '药品类型',
      dataIndex: 'drugTypeLabel',
    },
    {
      title: '生产厂家',
      dataIndex: 'companyName',
    },
    {
      title: '用药数量',
      dataIndex: 'takeQuantity',
      render: ({ record }: any) =>
        `${record.takeQuantity} ${record.takeUnitName}`,
    },
    {
      title: '护理员',
      dataIndex: 'staffName',
    },
  ];

  const page = usePageTable({
    searchForm: {
      state: {
        branchId: '',
        elderName: '',
        takeDrugTime: [],
        drugName: '',
        staffId: '',
      },
    },
    table: {
      apiFun: (params: any) => {
        const { takeDrugTime = [], ...ot } = params;
        return queryElderTakeDrug({
          ...ot,
          takeDrugDateStart: takeDrugTime[0],
          takeDrugDateEnd: takeDrugTime[1],
        });
      },
      columns,
    },
  });

  const branchSelectOptions = useSelectOption({
    name: '所在院区',
    apiFun: queryList,
    fieldNames: {
      value: 'id',
      label: 'name',
    },
  });
</script>

<template>
  <div class="col">
    <TableLayout v-bind="page.bindProps" :create="false">
      <template #searchForm="{ state }">
        <a-form-item field="branchId" label="所在院区" label-col-flex="60px">
          <a-select
            v-model="state.branchId"
            allow-clear
            v-bind="branchSelectOptions.bindProps"
          />
        </a-form-item>

        <a-form-item field="elderName" label="长者姓名" label-col-flex="60px">
          <a-input
            v-model="state.elderName"
            placeholder="请输入要查询的长者姓名"
            allow-clear
          />
        </a-form-item>

        <a-form-item
          field="takeDrugTime"
          label="用药时间"
          label-col-flex="60px"
        >
          <a-range-picker
            v-model="state.takeDrugTime"
            value-format="YYYY-MM-DD"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="drugName" label="药品名称" label-col-flex="60px">
          <a-input
            v-model="state.drugName"
            placeholder="请输入药品名称"
            allow-clear
          />
        </a-form-item>

        <a-form-item field="staffId" label="护理员" label-col-flex="60px">
          <a-select
            v-model="state.staffId"
            placeholder="请选择护理员"
            allow-clear
          />
        </a-form-item>
      </template>
    </TableLayout>
  </div>
</template>

<style lang="less" scoped></style>
